<template>
    <div class="wh-100">
        <div  class="h-100 d-flex w-100">
            <div :class="showRight ? 'w-76' : 'w-100'"  class="all-height" style=" background-color: white;" >
                <div class="h-100 ">
                    <div class="mt-8 mb-8  d-flex-between-center" >
                        <div  class=" h-100 d-flex-align-center">
                            <Button @click="getDataList" >刷新</Button>
                            <Button v-loading="deleteBtnLoading" @click="deleteSelect">批量删除</Button>
                            <Button type="dashed" @click="openTip=!openTip">{{ openTip ? "关闭提示" : "开启提示" }}</Button>
                            <Button v-loading="exportingSelect" @click="dropExportSelect">导出所选数据</Button>
                            <Button v-loading="exportingAll" @click="dropExportAll" >导出全部数据</Button>
                            <Button v-loading="exportingSearch" @click="dropExportSearch" class="mr-auto">下载当前查询数据</Button>
                        </div>
                        <Button class="mr-8" :icon="showRight?`ios-arrow-forward`:`ios-arrow-back`"
                                @click.native="clickShowRight"
                                type="primary">
                        </Button>
                    </div>
                    <div v-show="openTip">
                        <Alert show-icon>
                            已选择 <span class="select-count">{{ selectList.length }}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </div>
                    <div v-ref-height="refHeight" class="calc-px-height">
                        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
                               :height="refHeight.value"
                               @on-selection-change="changeSelect"
                        >
                            <template slot-scope="{row}" slot="action">
                                <div class="wh-100 d-flex-around-center fs-14" style="color: rgb(40, 115, 243)">
                                    <div class="mr-8 cursor-pointer" @click="reviewViewDetail(row)">详情</div>
                                    <div class="mr-8 cursor-pointer" @click="reviewHistory(row)">历史</div>
                                </div>
                            </template>
                            <template slot-scope="{row}" slot="result">
                                <div v-if="row.result == 0" style="color:rgb(255, 154, 3)">学校驳回 </div>
                                <div v-if="row.result == 1" style="color:rgb( 6, 206, 64)">学校通过 </div>
                                <div v-if="row.result == 2" style="color:rgb(255, 154, 3)">学院驳回 </div>
                                <div v-if="row.result == 3" style="color:rgb( 6, 206, 64)">学院通过，学校通过</div>
                                <div v-if="row.result == 4" style="color:rgb(255, 154, 3)">学院通过，学校驳回</div>
                                <div v-if="row.result == 5">学生撤回</div>
                                <div v-if="row.result == 6" style="color:rgb(22, 119, 255)">学院通过，学校待审核</div>
                            </template>
                        </Table>
                    </div>
                    <div  class="page d-flex-around-center pt-12">
                        <Page :current="searchForm.pageNumber"
                              :total="searchForm.total"
                              :page-size="searchForm.pageSize"
                              @on-change="changePage"
                              @on-page-size-change="changePageSize"
                              :page-size-opts="[10,20,50,100,200]"
                              size="small" show-total
                              show-elevator
                              show-sizer>
                        </Page>
                    </div>
                </div>
            </div>
            <div  class="h-100  w-auto ml-8" v-show="showRight" style=" background-color: white;">
                <div v-if="isSearch" class="">
                    <div class="w-100"  @keydown.enter.native="handleSearch">
                        <div  class="ml-8 pt-12 fs-14  fw-6 ">
                            查询区
                        </div>
                        <Form ref="searchForm" :model="searchForm"  :label-width="labelWidth" class="pl-12 pr-12 pt-32 w-100">
                            <FormItem class="w-100" label="姓名" prop="xm" >
                                <Input class="w-100" type="text" v-model="searchForm.name" placeholder="请输入姓名" clearable />
                            </FormItem>
                            <FormItem class="w-100 " label="考生号" prop="ksh" >
                                <Input class="w-100" type="text" v-model="searchForm.ksh" placeholder="请输入考生号" clearable />
                            </FormItem>
                            <FormItem class="w-100" label="学号" prop="xh" >
                                <Input class="w-100" type="text" v-model="searchForm.xh" placeholder="请输入学号" clearable />
                            </FormItem>
                            <FormItem class="w-100" label="身份证号" prop="sfzh" >
                                <Input class="w-100" type="text" v-model="searchForm.idCard" placeholder="请输入身份证号" clearable />
                            </FormItem>
                            <FormItem class="w-100" label="专业" prop="zy">
                                <Input class="w-100" type="text" v-model="searchForm.zy" placeholder="请输入专业名称" clearable/>
                            </FormItem>
                            <FormItem class="w-100" label="院系" prop="yxmc">
                                <Input class="w-100"  type="text" v-model="searchForm.yxmc" placeholder="请输入院系名称" clearable/>
                            </FormItem>
                            <FormItem label="学历" prop="college" class=" w-100">
                                <Select   v-model="searchForm.xlcc" clearable placeholder="请选择学历" class="w-100">
                                    <Option v-for="(item,index) in xlList" :value="item.value" :key="index">{{ item.title }}</Option>
                                </Select>
                            </FormItem>
                            <FormItem class="w-100" label="档案转递类型" prop="transferType" >
                                <Select  clearable v-model="searchForm.transferType" placeholder="请选择档案转递类型" class="w-100">
                                    <Option v-for="(item,index) in accountTypeList" :value="item.value" :key="index">{{ item.title }}</Option>
                                </Select>
                            </FormItem>
                            <FormItem class="w-100" label="档案转递单位名称" prop="unitName" >
                                <Input class="w-100"  type="text" v-model="searchForm.unitName" placeholder="请输入档案转递单位名称" clearable/>
                            </FormItem>
                            <FormItem class="w-100" label="审核结果" prop="result" >
                                <Select clearable v-model="searchForm.result"  placeholder="请选择审核结果" class="w-100">
                                    <Option value="0">学校驳回</Option>
                                    <Option value="1">学校通过</Option>
                                    <Option value="2">学院驳回</Option>
                                    <Option value="3">学院通过，学校通过</Option>
                                    <Option value="4">学院通过，学校驳回</Option>
<!--                                    <Option value="5">学生撤回</Option>-->
                                    <Option value="6">学院通过，学校待审核</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="审核起始时间" style="width: 100%">
                                <DatePicker
                                    element-id="selectDate"
                                    v-model="selectStartTime"
                                    type="datetime"
                                    class="w-100"
                                    clearable
                                    @on-change="selectStartDate"
                                    placeholder="选择起始时间"
                                ></DatePicker>

                            </FormItem>
                            <FormItem label="审核截止时间" style="width: 100%">

                                <DatePicker
                                    element-id="selectDate"
                                    v-model="selectEndTime"

                                    type="datetime"
                                    class="w-100"
                                    clearable
                                    @on-change="selectEndDate"
                                    placeholder="选择截止时间"
                                ></DatePicker>
                            </FormItem>
                            <FormItem class="br box-key">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                            </FormItem>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {shortcuts} from "@/libs/shortcuts";
import excel from "@/libs/excel";
import {
    archiveTransferInfoColumns,
    archiveTransferInfoData
} from "./importArchiveTransferInfoTemplate";
// import {importArchiveTransferInfoData} from "@/api";
import {importArchiveTransferInfoAPI} from "../../api/bys/destinationAfterGraduation";
import {
    archiveTransferDoneDeleteByIdsByIds,
    archiveTransferDoneExport,
    archiveTransferDoneExportByIds, archiveTransferDoneExportCondition,
    archiveTransferPass,
    archiveTransferReject, getArchiveTransferInfoDoneList,
    getPageReviewData
} from '../../api/archivesManagement/archiveForwardingAddressApis';
import util from '@/libs/util';
import { postBodyRequest } from '../../libs/axios';
import { getXldmzdList } from '../../api/bys/code/xldm';
import { getDictDataByType } from '../../api';
import { newProvincialDataApi } from '../../api/bys';
import { areaDataApi } from '../../api/common';
export default {
    name: 'archiveTransferIVeDoneIt',
    components: {},
    data() {
        return {
            labelWidth: 100,
            selectTime: null,
            selectStartTime: null,
            selectEndTime: null,
            isSearch: true,
            importing: false,
            importFormView: false,
            submitLoadings: false,
            importForm: {
                file: null,
                importMode: '1',
            },
            openTip: true, // 显示提示
            loading: true, // 表单加载状态
            deleteBtnLoading: false, // 删除按钮加载状态
            exportingSearch: false,
            exportingSelect: false,
            exportingAll: false,
            refHeight: { value: 0 },
            searchForm: { // 搜索框初始化对象
                pageNumber: 1, // 当前页数
                pageSize: 50, // 页面大小
                total:0,
                sort: "createTime", // 默认排序字段
                order: "desc", // 默认排序方式
            },
            selectList: [], // 多选数据
            columns: [],
            columns_1: [
                // 表头
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    type: "index",
                    title: "序号",
                    width: 60,
                    align: "center"
                },
                {
                    title: "院校名称",
                    key: "gxmc",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "院系名称",
                    key: "yxmc",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    title: "专业",
                    key: "zy",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    title: "姓名",
                    key: "name",
                    minWidth: 100,
                    sortable: false,
                },
                {
                    title: "学历",
                    key: "xlcc",
                    minWidth: 100,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.xlList.find(item => item.value === params.row.xlcc).title);
                    }
                },
                {
                    title: "身份证号",
                    key: "idCard",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "考生号",
                    key: "ksh",
                    minWidth: 150,
                    sortable: false,
                },
                {
                    title: "学号",
                    key: "xh",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    title: "档案转递类型",
                    key: "transferType",
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.accountTypeList.filter((item) => item.value == params.row.transferType)[0].title);
                    }
                },
                {
                    title: "档案转递单位名称",
                    key: "unitName",
                    minWidth: 200,
                    sortable: false,
                },
                {
                    title: "档案转递单位所在地",
                    key: "unitLocation",
                    minWidth: 200,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', params.row.unitLocationName);
                    }
                },
                {
                    title: "档案转递详细地址",
                    key: "unitAddress",
                    minWidth: 300,
                    sortable: false,
                },
                {
                    title: "档案转递单位邮编",
                    key: "unitZip",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "档案转递单位联系人",
                    key: "unitContact",
                    minWidth: 200,
                    sortable: false,
                },
                {
                    title: "档案转递单位联系电话",
                    key: "unitTel",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: '审核节点',
                    key: 'node',
                    minWidth: 120
                },
                {
                    title: '审核意见',
                    key: 'comment',
                    align: 'center',
                    minWidth: 130
                },
                {
                    title: '耗时',
                    key: 'duration',
                    align: 'center',
                    width: 100,
                    sortable: true,
                    render: (h, params) => {
                        return h('div', util.millsToTime(params.row.duration));
                    }
                },
                {
                    title: "申请时间",
                    key: "startTime",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "审核时间",
                    key: "endTime",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "审核结果",
                    slot: "result",
                    minWidth: 180,
                    sortable: false,
                    fixed: "right",
                },
                {
                    title: "操作",
                    slot: "action",
                    align: "center",
                    minWidth: 120,
                    fixed: "right",
                }
            ],
            data: [], // 表单数据
            height: 510,
            showRight: true,
            rightTitle: "审核通过",
            rightData: {
                comment: "",
                sendMessage: false,
                send: [],
            },
            rowData: {},
            xlList: [],
            accountTypeList: [], // 档案转寄类型
            locationOfTheUnitList: [], // 单位所在地
            // 省市区级联
            provincesAndMunicipalitiesProps: {
                label: 'name',
                value: 'code',
                children: 'children'
            },
            areaList: [],
        };
    },
    methods: {
        onRestWindow() {
            this.columns = this.restTableCellWidth(this.columns_1)
            this.labelWidth = this.searchLabelWidth(this.labelWidth)
        },
        async getareaData() {
            let res = await areaDataApi()
            if(res.code === 200){
                this.areaList = res.result
                console.log("this.areaList",this.areaList)
            }
        },
        selectStartDate(data){
            this.searchForm.startTime = data;
            // this.searchForm.endTime = data[1];
            console.log(data)
        },
        selectEndDate(data){
            // this.searchForm.startTime = data[0];
            this.searchForm.endTime = data;
            console.log(data)
        },
        deleteSelect(){
            if (this.selectList.length <= 0) {
                this.$Message.warning("您还未选择要删除的数据");
                return;
            }
            this.$Modal.confirm({
                title: "确认删除",
                render: (h) => {
                    return h('div', [
                        h('p', "您确认要删除所选的 " + this.selectList.length + " 条数据?",),
                    ]);
                },
                loading: true,
                onOk: () => {
                    let ids = [];
                    this.selectList.forEach(function(e) {
                        ids.push(e.tableId)
                    });
                    // this.deleteBtnLoading = true;
                    archiveTransferDoneDeleteByIdsByIds({ids: ids}).then(res => {
                        this.$Modal.remove();
                        if (res.code === 200) {
                            this.$message.success("删除成功");
                        }
                        this.clearSelectAll();
                        this.getDataList();
                        // this.deleteBtnLoading = false;
                    })
                }
            });
        },
        dropExportSearch(){
            this.exportingSearch = true;
            archiveTransferDoneExportCondition(this.searchForm).then(res => {
                this.exportingSearch = false;
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '已审核的档案信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
            console.log(ids);
        },
        dropExportAll() {
            this.exportingAll = true;
            archiveTransferDoneExport().then(res => {
                this.exportingAll = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '已审核的档案信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },
        dropExportSelect(){
            let ids = [];
            console.log("this.selectList",this.selectList)
            this.selectList.forEach(function(e) {
                ids.push(e.tableId)
            });
            this.exportingSelect = true;
            archiveTransferDoneExportByIds({ids: ids}).then(res => {
                this.exportingSelect = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '已审核的档案信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
            console.log(ids);
        },
        async obtainTheAccountMigrationType() {
            let res = await getDictDataByType('file-forwarding-type')
            if (res.code === 200) {
                this.accountTypeList = res.result
            }
        },
        newObtainTheCascadingDataOfProvincesAndCities() {
            newProvincialDataApi().then((res) => {
                this.locationOfTheUnitList = res.result;
                console.log("this.locationOfTheUnitList", this.locationOfTheUnitList)
            })
        },
        async getxlList() {
            let res= await getDictDataByType('eduLevelType')
            if (res.code === 200) {
                this.xlList = res.result
            }
        },
        getSelectData() {
            this.newObtainTheCascadingDataOfProvincesAndCities()
            this.getxlList()
        },
        changeCar() {
            this.searchForm.sydCode = this.searchForm.unitLocation[2];
        },
        dateChange(data) {
            this.searchForm.bysj = data.split("-")[0] + data.split("-")[1]
        },
        async init() {
            this.getSelectData();
            await this.obtainTheAccountMigrationType();
            await  this.getxlList();
            await this.getareaData()
            this.getDataList();
        },
        reviewHistory(row) {
            this.$router.push({
                name: "ArchiveReviewHistory",
                query: {
                    userId: row.userid,
                },
            });
        },
        reviewViewDetail(row) {
            this.$router.push({
                name: "ArchiveReviewInfo",
                params: {
                    row: row,
                    type: "已审核"
                },
            });
        },

        // 显示隐藏右侧区域
        clickShowRight() {
            this.showRight = !this.showRight
        },

        handleSearch() {
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            this.getDataList();
        },
        handleReset() {
            this.$refs.searchForm.resetFields();
            this.selectTime = null;
            this.selectStartTime = null;
            this.selectEndTime = null;
            this.searchForm.xlcc=null;
            this.searchForm.name=null;
            this.searchForm.idCard=null;
            this.searchForm.ksh=null;
            this.searchForm.xh=null;
            this.searchForm.transferType=null;
            this.searchForm.unitName=null;
            this.searchForm.yxmc=null;
            this.searchForm.zy=null;
            this.searchForm.result=null;
            this.searchForm.startTime=null;
            this.searchForm.endTime=null;
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            // 重新加载数据
            this.getDataList();
        },
        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        changeSelect(e) {
            this.selectList = e;
            console.log("selectList", this.selectList);
        },
        changePage(v) {

            this.searchForm.pageNumber = v;
            this.getDataList();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        getDataList() {
            this.loading = true;
            getArchiveTransferInfoDoneList({ ...this.searchForm }).then(res => {
                console.log("res……", res);
                this.data = res.result.result;
                this.searchForm.total = res.result.total;
                this.loading = false;
            })
        },
    },
    beforeDestroy() {
      window.removeEventListener('resize',this.onRestWindow)
    },
    mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        this.init();
    }
};
</script>
<style lang="less" scoped>

//form表单间距统一修改
.ivu-form-item {
    margin-bottom: 0.01rem !important;
}

.calc-px-height {
    height: calc(100% - 170px);
}


@media (max-width: 1920px) {
    /deep/ .ivu-table .ivu-table-fixed-right{
        height: 98% !important;
    }
    /deep/ .ivu-table .ivu-table-fixed-right  .ivu-table-fixed-body {
        height: 94% !important;
    }
    /deep/ .ivu-table-body {
        height: 94%;
    }
}
// 重构样式
/deep/ .ivu-form-item-label{
    display: flex;
    justify-content: right;
    width: 190px !important;
}
/deep/ .ivu-form-item {
    width: 100%;
    margin-bottom: 0.1rem;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/deep/ .ivu-form-item-content {
    width: 100% !important;
    margin-left: 0 ! important;
}
/deep/ .ivu-select {
    width: 100% !important;
}
/deep/ .ivu-date-picker {
    width: 100% !important;
}
/deep/ .br {
    margin-top: 15px;
    bottom: 0.12rem !important;
    .ivu-form-item-content {
        display: flex;
    }
}
/deep/ .ivu-input-type-textarea,/deep/ .ivu-input {
    height: calc(100% - 7px) !important;
}
.flex-1 {
    height: 100%;
}
/deep/ .ivu-drawer-body {
    overflow: hidden;
    .d-flex-align-center {
        height: fit-content !important;
        margin-left: 0 !important;
        justify-content: right;
        box-sizing: border-box;
        padding-right: 7px;
    }
}
.box-key {
    /deep/ .ivu-form-item-content {
        margin-left: 120px !important;
    }
}
</style>
